<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-select v-model="conditions.plan_id" clearable filterable allow-create remote reserve-keyword placeholder="请选择计划" :remote-method="planFn" :loading="school_loading" size="small">
          <el-option v-for="item in planOptions" :key="item.id" :label="item.title" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="conditions.province_id" clearable placeholder="请选择省" size="small" @change="cityFn">
          <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="conditions.city_id" clearable placeholder="请选择市" size="small" @change="areaFn">
          <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="conditions.area_id" clearable placeholder="请选择区" size="small">
          <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="conditions.school_id" clearable filterable allow-create remote reserve-keyword placeholder="请输入学校名称关键字" :remote-method="remoteMethod" :loading="school_loading" size="small">
          <el-option v-for="item in schoolOptions" :key="item.id" :label="item.title" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <!-- <el-row v-if="mapData" :gutter="20">
      <map-china :mapData="mapData" :conditions="this.conditions" @provinceFn="provinceFn" @cityDataFn="cityDataFn"></map-china>
    </el-row> -->
    <national-table v-if="this.isPlan === 1" :form="this.form"></national-table>
    <plan-table  v-if="this.isPlan === 2" :form="this.form"></plan-table>
  </div>
</template>
<script>
import {APISCHOOLWHOLEREGION, APISCHOOLOPTION, APIPLANOPTION} from '@/common/api.js'
import mapChina from '@/components/map.vue'
import planTable from './planTable'
import nationalTable from './nationalTable'
export default {
  props: ['userJson'],
  components: {
    mapChina,
    planTable,
    nationalTable
  },
  data () {
    return {
      isPlan: 1,
      mapData: true,
      planOptions: '',
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      schoolOptions: [],
      conditions: {
        plan_id: '',
        province_id: '',
        city_id: '',
        area_id: '',
        school_id: ''
      },
      form: {},
      school_loading: false,
      chart: null
    }
  },
  created () {
    this.getWholeRegion()
  },
  methods: {
    getWholeRegion () {
      APISCHOOLWHOLEREGION().then((res) => {
        this.provinceOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    cityFn () {
      if (this.conditions.province_id) {
        this.conditions.city = ''
        this.conditions.area = ''
        APISCHOOLWHOLEREGION({
          parent_id: this.conditions.province_id
        }).then((res) => {
          this.cityOptions = res.data
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }
    },
    areaFn () {
      if (this.conditions.city_id) {
        this.conditions.area = ''
        APISCHOOLWHOLEREGION({
          parent_id: this.conditions.city_id
        }).then((res) => {
          this.areaOptions = res.data
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }
    },
    remoteMethod (query) {
      if (query !== '') {
        APISCHOOLOPTION({
          title: query
        }).then((res) => {
          this.schoolOptions = res.data
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }
    },
    planFn (query) {
      if (query !== '') {
        APIPLANOPTION({
          title: query
        }).then((res) => {
          this.planOptions = res.data
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }
    },
    searchFn () {
      this.isPlan = 0
      if (this.conditions.plan_id === '') {
        this.$nextTick(() => {
          this.isPlan = 1
          this.form = this.conditions
          // console.log(111)
        })
      } else {
        this.$nextTick(() => {
          this.isPlan = 2
          this.form = this.conditions
          // console.log(222)
        })
      }
    },
    provinceFn (id) {
      // console.log(id)
      this.provinceOptions.forEach(item => {
        if (item.id === Number(id)) {
          this.conditions.province_id = Number(id)
          this.cityFn()
          this.searchFn()
        }
      })
    },
    cityDataFn (id) {
      var area = ''
      if (this.conditions.province_id) {
        // console.log('有')
        this.cityOptions.forEach(item => {
          if (item.name === id) {
            // console.log(item.id)
            this.conditions.city_id = item.id
            this.areaFn()
            this.searchFn()
          } else {
            area = id
          }
        })
      }
      if (area !== '') {
        console.log(111)
      }
      // console.log(id)
    }
  }
}
</script>
<style scoped>
.conclusion{
  margin: 20px 0;
}
</style>
